<template>
	<div class="container">
		<div class="h-box">
			<el-image class="mr-10" :src="goBack" fit="fill" />
			<span>项目名称</span>
		</div>
		<div class="m-box">
			<w-block class="tree-box" title="任务列表">
				<el-tree class="mt-10" :data="treeList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
			</w-block>
			<w-block class="r-v" title="信息上报">
				<div class="h-box-right mt-10">
					<div class="flex-start">
						<el-image class="mr-10" :src="goBottom" fit="fill" />
						<span>本单位会议纪要</span>
					</div>
					<el-button type="primary">增加</el-button>
				</div>
				<el-table
					class="mt-20"
					:data="tableData"
					tooltip-effect="dark"
					stripe
					row-class-name="row-class-name"
					cell-class-name="cell-class-name"
					header-row-class-name="header-row-class-name"
					header-cell-class-name="header-cell-class-name"
					style="width:100%"
					height="250"
				>
					<el-table-column show-overflow-tooltip prop="c00" label="模版名称" />
					<el-table-column show-overflow-tooltip prop="c01" label="项目类型" />
					<el-table-column show-overflow-tooltip prop="c02" label="使用场景" />
					<el-table-column show-overflow-tooltip prop="c03" label="状态" />
					<el-table-column show-overflow-tooltip prop="c04" label="启用时间" />
					<el-table-column show-overflow-tooltip prop="c05" label="创建人" />
					<el-table-column show-overflow-tooltip prop="c06" label="创建机构" />
					<el-table-column show-overflow-tooltip prop="c07" label="创建时间" />
					<el-table-column label="操作" width="200">
						<template slot-scope="scope">
							<el-button type="text" @click="handleEdit(scope.$index, scope.row)">流程管理</el-button>
							<el-button type="text" @click="handleEdit(scope.$index, scope.row)">启用</el-button>
							<el-button type="text" @click="handleEdit(scope.$index, scope.row)">停用</el-button>
						</template>
					</el-table-column>
				</el-table>

				<div class="h-box-right mt-20">
					<div class="flex-start">
						<el-image class="mr-10" :src="goBottom" fit="fill" />
						<span>议题申报表及相关情况说明</span>
					</div>
					<el-button type="primary">增加</el-button>
				</div>
				<el-table
					class="mt-20"
					:data="tableData"
					tooltip-effect="dark"
					stripe
					row-class-name="row-class-name"
					cell-class-name="cell-class-name"
					header-row-class-name="header-row-class-name"
					header-cell-class-name="header-cell-class-name"
					style="width:100%"
					height="250"
				>
					<el-table-column show-overflow-tooltip prop="c00" label="模版名称" />
					<el-table-column show-overflow-tooltip prop="c01" label="项目类型" />
					<el-table-column show-overflow-tooltip prop="c02" label="使用场景" />
					<el-table-column show-overflow-tooltip prop="c03" label="状态" />
					<el-table-column show-overflow-tooltip prop="c04" label="启用时间" />
					<el-table-column show-overflow-tooltip prop="c05" label="创建人" />
					<el-table-column show-overflow-tooltip prop="c06" label="创建机构" />
					<el-table-column show-overflow-tooltip prop="c07" label="创建时间" />
					<el-table-column label="操作" width="200">
						<template slot-scope="scope">
							<el-button type="text" @click="handleEdit(scope.$index, scope.row)">流程管理</el-button>
							<el-button type="text" @click="handleEdit(scope.$index, scope.row)">启用</el-button>
							<el-button type="text" @click="handleEdit(scope.$index, scope.row)">停用</el-button>
						</template>
					</el-table-column>
				</el-table>
			</w-block>
		</div>
	</div>
</template>

<script>
import goBack   from '@/assets/images/go-back.png';
import goBottom from '@/assets/images/go-bottom.png';
import api    from '@/api/api'
export default {
	name      : "tree-task",
	components: {},
	props     : {},
	data() {
		return {
			id               : this.$route.params.id,
			goBack,
			goBottom,
			treeList         : [
				{
					label   : '立项',
					children: [
						{
							label   : '上报政府会议报批事项（已开始）',
							children: [
								{label: '上报本单位业务会议（已完成）', path: '/tree-task/t_00_00_00'},
								{label: '上报主管区长业务会议（已开始）', path: '/tree-task/t_00_00_01'},
								{label: '上报审委会会议（待上报）', path: '/tree-task/t_00_00_01'},
								{label: '上报政府会议（未开始）', path: '/tree-task/t_00_00_01'},
							]
						},
						{label: '勘察、设计单位招标报批事项（未开始）', path: '/tree-task/t_00_00_01'},
						{label: '办理《建设项目选址意见书》报批事项（未开始）', path: '/tree-task/t_00_00_01'},
						{label: '办理《建设用地规划许可证》报批事项（未开始）', path: '/tree-task/t_00_00_01'},
						{label: '办理《政府投资项目可行性研究报告的批复》、《政府投资项目初步设计及概算的批复》报批事项', path: '/tree-task/t_00_00_01'},
						{label: '办理《国有土地划拨决定书》及《不动产权证书》报批事项', path: '/tree-task/t_00_00_01'},
						{label: '办理《工程规划设计方案审定通知书》报批事项', path: '/tree-task/t_00_00_01'},
						{label: '办理环评、人防、抗震等批件报批事项', path: '/tree-task/t_00_00_01'},
						{label: '办理《建设工程规划许可证》报批事项', path: '/tree-task/t_00_00_01'},
						{label: '办理《施工图审查合格证》报批事项', path: '/tree-task/t_00_00_01'},
						{label: '办理消防批件报批事项', path: '/tree-task/t_00_00_01'},
						{label: '施工、监理单位招标报批事项', path: '/tree-task/t_00_00_01'},
						{label: '办理《建筑工程施工许可证》报批事项', path: '/tree-task/t_00_00_01'},
					]
				},
				{
					label   : '勘查设计',
					children: [
						{label: '审批/报批', path: '/tree-task/t_00_00_01'},
					]
				},
				{
					label   : '招投标',
					children: [
						{label: '审批/报批', path: '/tree-task/t_00_00_01'},
					]
				},
				{
					label   : '施工',
					children: [
						{label: '审批/报批', path: '/tree-task/t_00_00_01'},
					]
				},
				{
					label   : '验收',
					children: [
						{label: '审批/报批', path: '/tree-task/t_00_00_01'},
					]
				},
			],
			defaultProps     : {
				children: 'children',
				label   : 'label'
			},
			//
			multipleSelection: [],
			tableData        : [
				{c00: '模板ABC', c01: '大型项目', c02: '基建', c03: '保存', c04: '2020-08-12', c05: '谭四友', c06: '国家建设局', c07: '2020-08-12'},
			],
		};
	},
	computed  : {},
	watch     : {},
	methods   : {
		handleNodeClick({label, children, path}) {
			// console.log(label, children, path);
			if (children) return;
			if (this.$router.currentRoute.path === path) return;
			this.$router.push({path});
		},
		getTitledata(){
			api.get['/rest/info/todoList'](this.id)
				.then(({data}) => {
					if (!data) return;
					console.log(data);
				})
		},
	},
	mounted() {
		this.getTitledata();
	},
}
</script>

<style lang="scss" scoped>
	@import "~@/assets/css/_variables.scss";

	.container {
		@include flex-column(flex-start, flex-start);
		height: 100%;

		.h-box {
			@include flex-start();
			width: fit-content;
		}

		.m-box {
			@include flex-start(flex-start);
			@include flex-1();
			margin-top: 20px;
			width: 100%;
			height: 780px;
			border-radius: 4px;
			overflow: hidden;

			.tree-box {
				width: 570px;
				height: 100%;
				overflow: auto;
			}

			.r-v {
				margin-left: 20px;
				@include flex-1();
				height: 100%;
			}
		}
	}

	.h-box-right {
		@include space-between();
		width: 100%;
	}
</style>
